<template>
  <div class="container">
    <div class="create">
      <div class="wrapper">
        <creat-nav></creat-nav>
        <div class="create-body">
          <div class="announce">
            <button>发布主题</button>
          </div>
          <div class="input-title">
            <input type="text" v-model="stick.title">
            <span style="color: red;font-size:.24rem;padding-left: .2rem">{{errorText}}</span>
          </div>
          <div class="draftBtn">草稿箱</div>
          <div class="quill_box">
            <quill-editor 
              v-model="stick.content" 
              @change="countValueLength($event)" 
              @focus="handleEditorFocus"
              @blur="handleEditorBlur"
            ></quill-editor>
            <div class="forPosition"></div>
          </div>
          <div class="checkWord">
            检查字数：
            <span v-show="showCount">已输入{{ 0 || wordCount }}字</span>
          </div>
          <div class="clickbtn">
            <button class="submit" @click="postAllStickInfo">发布</button>
            <button class="saveForDraft">存为草稿</button>
            <input type="checkbox" id="hint" @click="handleHintChosed">
            <label for="hint">有回复提醒我</label>
          </div>
        </div>
      </div>
    </div>
    <alert-prop 
      v-if="showAlert" 
      :fromText="'发帖'" 
      :toText="childName" 
      :toRoute="'/detail'+childRoute"
      :toQuery="childId"
    >
    </alert-prop>
  </div>
</template>

<script>
import CreatNav from 'common/navbar/NavBar';
import { quillEditor } from 'vue-quill-editor';
import { http } from 'common/verify.js';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import axios from 'axios';
import AlertProp from 'common/alert/AlertProp.vue';
export default {
  name: 'Create',
  inject: ['reload'],
  components: {
    CreatNav,
    quillEditor,
    AlertProp
  },
  data () {
    return {
      theme: {
        father: '',
        child: '',
      },
      stick: {
        title: '',
        content: '',
        replyHint: false
      },
      wordCount: 0,
      showCount: false,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            [ "image"]
          ]
        },
      },
      showAlert: false,
      asideList: [],
      id: '',
      childId: '',
      childName: '',
      childRoute: '',
      errorText: ''

    }
  },
  methods: {
    getCreateThemes () {
      this.theme.father = this.$route.query.theme;
      this.theme.child = this.$route.query.childTheme;
    },
    handlePlaceHolderHide () {
      $('.ql-editor').attr('data-placeholder','');
    },
    countValueLength (el) {
      const text = el.text.replace(/[\r\n]/g,"");
      this.wordCount = text.length;
    },
    handleEditorFocus (el) {
      if(this.showCount == false) {
        this.showCount = true
      }
    },
    handleEditorBlur (el) {
      if (this.wordCount == 0) {
        this.showCount = false
      }
    },
    handleHintChosed(){
      if(this.stick.replyHint == false) {
        this.stick.replyHint == true
      }
      this.stick.replyHint == false
    },

    getALLlistInfo() {
      const _this = this;
      this.id = this.$route.query.data;
      const arr = [];
      axios.get('/api/source/home.json').then(function(response){
        if(response.data.ret && response.data.data){
          const res = response.data.data
          var flag = false;
          for(let i in res){
            if(res[i].id == _this.id){
              arr.push(res[i]);
              break;
            }else{
              const chirld = res[i].children;
              for(let j in chirld){
                if(chirld[j].id == _this.id){
                  arr.push(chirld[j]);
                  _this.childId = _this.id;
                  _this.childName = chirld[j].title;
                  _this.childRoute = chirld[j].routes;
                  flag = true;
                }
              }
            }
            if(flag){
              break;
            }
          }
          _this.asideList = arr;
        }
      })
    },
    postAllStickInfo () {
      const _this = this;
      if (this.stick.title == ''|| this.stick.content == '') {
        this.errorText = '标题和内容不能为空';
        return
      }else{
        this.errorText = '';
      }
      const finaldata = {
        areaId: _this.id,
        cardName:_this.stick.title,
        cardContent:_this.stick.content,
        cardDesc: _this.childName,
        user:{
          userName:_this.$store.state.username
        }
      };
      const tokenData = window.localStorage.getItem('responseData');
      console.log(finaldata)
      axios({
          method: 'post',
          url: ''+http+':8080/card',
          headers:{
            'token': ''+tokenData+'',
            'Content-type': 'application/json'
          },
          data: JSON.stringify(finaldata)
        }).then(function (response) {
          console.log(response)
          if(response.data.code == 0) {
            _this.showAlert = true;
            setTimeout(function() {
              _this.showAlert = false;
              _this.$router.push({path:'/detail'+_this.childRoute,query:{data: _this.id}});
              _this.reload();
            },5000)
          }
        }).catch(function (error) {
        　console.log(error);
        })
    }
  },
  mounted () {
    this.getCreateThemes();
    this.handlePlaceHolderHide();
    this.getALLlistInfo();
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  .wrapper .create-body >>> .quill-editor
    position: relative
    width: 14.72rem
  .wrapper .create-body >>> .ql-toolbar.ql-snow
    position: relative
    background-color: $bgcolor-title
    height: 1.16rem
  .wrapper .create-body >>> .ql-container
    position: relative
    height: 6.5rem
  .create
    container()
    padding-top: $spaceHeight
    .wrapper
      wrapper()
      .create-body
        margin: .32rem .28rem
        .announce
          border-bottom: .02rem solid $borderColor
          padding-bottom: .12rem
          position: relative
          button 
            background: #4791d0
            width: 1.36rem
            height: .48rem
            border: .01rem solid #4791d0
            border-radius: .06rem
            font-size: .24rem
            color: #fff
            font-weight: bold
        .input-title
          height: 1.2rem 
          line-height: 1.2rem
          input 
            width: 7.2rem
            height: .5rem
            border: .01rem solid $borderDeep
          input:focus
            border: .03rem solid #99d8f5
        .draftBtn
          position: absolute
          color: $font-welcome
          font-size: .24rem
          right: .3rem
          margin-top: -.85rem
          padding: .1rem
          border: .01rem solid transparent
        .draftBtn:hover
          border: .01rem solid $borderDeep
          cursor: pointer
        .quill_box
          position: relative
          display: flex
          flex-wrap: no-wrap
          .forPosition
            width: 3.6rem
            height: 7.66rem
        .checkWord
          position: absolute
          width: 14.48rem
          height: .5rem
          line-height: .5rem
          margin-top: -.51rem
          margin-left: .02rem
          background-color: #f6f4f5
          z-index: 20000
          font-size: .24rem
          padding-left: .2rem
        .clickbtn
          margin-top: .2rem
          margin-bottom: 1rem
          button 
            width: 1.98rem
            height: .6rem
            line-height: .6rem
            text-align: center
            border-radius: .05rem
            font-size: .24rem
            font-weight: bold
            border: .01rem solid #b1aeae
            margin-right: .2rem
          .submit
            background: linear-gradient(to bottom, #64b9df , #3776bf)
            border: .01rem solid #0c497c
            color: #fff
          .submit:hover
            cursor: pointer
            background: linear-gradient(to bottom, #56a8d7 , #3776bf)
          .saveForDraft
            background: linear-gradient(to bottom, #fff , #e1e1e1)
            color: #333
          .saveForDraft:hover
            ursor: pointer
            background: linear-gradient(to bottom, #f9f9f9 , #d2d2d2)
          input 
            width: .3rem
          span 
            font-size: .22rem   
</style>
